<template>
  <div>
    <div class="header">
      <p>这是一个p</p>
    </div>
    <div class="nesting clearfix">
      <div class="content">
        <span>嵌套示例</span>
      </div>
      <div class="content">
        <span>第二个div</span>
      </div>
    </div>
    <div class="footer">
        <span>footer</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Less'
}
</script>

<style scoped lang="less">
/*变量*/
  @width: 100px;
  @height: @width + 20px;
  @bgColor: red;
  .header {
    width: @width;
    height: @height;
    background-color: @bgColor;
    /*混合mixins*/
    .border();
  }
  .border(@bgc:blue) {
    border: solid 4px @bgc;
    p{
      color: aquamarine;
    }
  }
  /*嵌套*/
  .nesting{
    width: 300px;
    background-color: #cccccc;
    .content {
      float: left;
      .border(#42b983);
      span{
        color: saddlebrown;
        &::after{
          content: "";
          font-size: 0;
          border: solid 15px transparent;
          border-left-color:blue;
          height: 0;
        }
      }
    }
  }
  .clearfix {
    zoom: 1;
    &:after {
      content: " ";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    >div{
      font-size: 20px;
    }
    &_borther{
      background-color: blue;
      width: @width;
      height: @height;
    }
  }
  .footer {
    .nesting.content()
  }
</style>
